<%--
  Created by IntelliJ IDEA.
  Date: 2022/5/10
  Time: 21:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" +request.getServerPort() +
            request.getContextPath() + "/";
%>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css">
    <link rel="icon" href="img/login.ico" type="image/x-icon">
    <link rel="Shortcut Icon" href="img/login.ico" type="image/x-icon">
    <title>登录|注册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,body,main {
            height: 100%;
        }

        body {
            font: 14px/1.5 Arial;
        }

        a {
            text-decoration: none;
            color: #444;
        }

        ul,li{
            list-style: none;
        }
        main {
            background: linear-gradient(to right top, rgba(38,50,105,0.48), rgba(255,152,0,0.55)), url(${pageContext.request.contextPath}/static/images/bg.jpg) center center no-repeat  ;
            background-size: cover;
        }

        header {
            position: absolute;
            top: 10px;
            width: 100%;
        }

        header .login {
            float: right;
            margin-right: 20px;
            font-size: 25px;
        }

        header .login:hover {
            color: #fff;
        }

        /* .flip-modal{
          display: none;
        }

        .show{
          display: block!important;
        } */

        .modal {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 400px;
            padding: 16px;
            background-color: rgba(115,145,145,0.05);
            box-shadow: 0 2px 2px 3px rgba(0,0,0,0.3)
        }

        .modal .close {
            position: absolute;
            right: 10px;
            top: 10px;
        }

        .modal .close:hover {
            color: #fff;
        }

        .modal .tabs {
            text-align: center;
        }

        .modal .tabs a {
            display: inline-block;
            font-size: 16px;
            margin: 0 10px;
            color: #666;
        }

        .modal .tabs a:hover{
            color: #fff;
        }

        .modal .tabs a.active {
            border-bottom: 2px solid #444;
            color: #444;
        }

        .modal .content {
            padding: 20px 40px;
        }

        .modal .errormsg {
            color: #ddd;
            font-size: 14px;
        }

        .modal .content .input-field {
            position: relative;
            margin-top: 10px;
        }

        .modal .content .input-field .fa {
            position: absolute;
            left:13px;
            top: 13px;
        }

        .modal .content input[type=text],
        .modal .content input[type=password] {
            width: 100%;
            padding: 10px 10px 10px 28px;
            outline: none;
        }

        .modal .content input[type=submit] {
            padding: 6px 20px;
            border: none;
            background: rgba(115,145,145,0.05);
            box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.7);
            border-radius: 8px;
            outline: none;
            color: #fff;
            position: absolute;
            left: calc(50% - 32px);
        }

        .modal .content input[type=submit]:hover {
            background-color: rgba(68,68,68,0.4);
            transition: 1s;
        }

        .flip-modal.login .modal-login,
        .flip-modal.register .modal-register {
            transform: translate(-50%,-50%) rotateY(0deg);
            backface-visibility: hidden;
            transition: all 1s;
        }

        .flip-modal.login .modal-register,
        .flip-modal.register .modal-login {
            transform: translate(-50%,-50%) rotateY(180deg);
            backface-visibility: hidden;
            transition: all 1s;
        }
    </style>
</head>
<body>

<header>
    <a class="login" href="#">
        <i class="fa fa-user-circle"></i>
    </a>

</header>
<main>
    <div class="flip-modal login">
        <div class="modal modal-login">
            <a class="close" href="#">
                <i class="fa fa-close"></i>
            </a>
            <div class="tabs">
                <a class="login active "href="#" style="font-size:30px ;font-weight: bold">登录</a>
<%--                <a class="register" href="#">注册</a>--%>
            </div>
            <div class="content">
                <div class="errormsg"></div>
                <form action="${pageContext.request.contextPath}/login" method="post">
                    <div class="input-field">
                        <i class="fa fa-user-o"></i>
                        <input name="email" type="text" placeholder="用户名称">
                    </div>
                    <div class="input-field">
                        <i class="fa fa-lock"></i>
                        <input name="password" type="password" placeholder="口令">
                    </div>
                    <div class="input-field">
                        <input type="submit" value="登录">
                    </div>
                </form>
            </div>
        </div>
        <div class="modal modal-register">
            <a class="close fa fa-close" href="#"></a>
            <div class="tabs">
                <a class="login" href="#">登录</a>
<%--                <a class="register active" href="#">注册</a>--%>
            </div>
<%--            <div class="content">
                <div class="errormsg"></div>
                <form class="" action="/register" method="post">
                    <div class="input-field">
                        <i class="fa fa-user-o"></i>
                        <input name="username" type="text" placeholder="输入用户名">
                    </div>
                    <div class="input-field">
                        <i class="fa fa-lock"></i>
                        <input name="passeord" type="password" placeholder="输入密码">
                    </div>
                    <div class="input-field">
                        <i class="fa fa-lock"></i>
                        <input name="passeord2" type="password" placeholder="请再次输入密码">
                    </div>
                    <div class="input-field">
                        <input type="submit" value="注册">
                    </div>
                </form>
            </div>--%>
        </div>
    </div>

</main>
<script>
    function $(selector){
        return document.querySelector(selector)
    }
    function $$(selector){
        return document.querySelectorAll(selector)
    }
    $('header .login').onclick = function(e){
        e.stopPropagation()
        $('.flip-modal').style.display = 'block'
    }
    $('.flip-modal').addEventListener('click', function(e){
        e.stopPropagation()
        if(e.target.classList.contains('login')){
            $('.flip-modal').classList.remove('register')
            $('.flip-modal').classList.add('login')
        }
        if(e.target.classList.contains('register')){
            $('.flip-modal').classList.add('register')
            $('.flip-modal').classList.remove('login')
        }
        console.log(e.target)
        console.log(this)
        window.target = e.target
        if(e.target.classList.contains('close')){
            $('.flip-modal').style.display = 'none'
        }
    })
    document.addEventListener('click', function(){
        $('.flip-modal').style.display = 'none'
    })

    $('.modal-login form').addEventListener('submit', function(e){
        e.preventDefault()
     /*   if(!/^\w{3,30}$/.test($('.modal-login input[name=email]').value)){
            $('.modal-login .errormsg').innerText = '用户名需输入3-30个字符，包括字母数字下划线'
            return false
        }*/
        if(($('.modal-login input[name=email]').value)===null){
            $('.modal-login .errormsg').innerText = '用户名不能为空'
            return false
        }
        if(!/^\w{5,20}$/.test($('.modal-login input[name=password]').value)){
            $('.modal-login .errormsg').innerText = '密码需输入5-20个字符'
            return false
        }
        this.submit()
    })
</script>
</body>
</html>
